<script lang="ts" setup>
import { ref } from 'vue';
import { Icon } from '@iconify/vue';

const model = defineModel({ default: '' })

const dialogVisible = ref(false);


// 示例图标类别和图标列表
const categories = ref([
    {
        name: 'Navigation',
        icons: [
            { icon: 'mdi:home' },
            { icon: 'mdi:account' },
            { icon: 'mdi:menu' },
        ],
    },
    {
        name: 'Social',
        icons: [
            { icon: 'mdi:facebook' },
            { icon: 'mdi:twitter' },
            { icon: 'mdi:instagram' },
        ],
    },
]);

// const activeName = ref(categories.value[0].name);
const activeName = ref('Navigation');

function selectIcon(iconName: string) {
    model.value = iconName;
    dialogVisible.value = false;
}

function clear(){
    model.value = ''
    dialogVisible.value = false
}
</script>

<template>
    <ElButton  @click="dialogVisible = true">
        <div v-if="model == ''">
            选择图标
        </div>
        <Icon v-else :icon="model" class="icon-preview" @click="dialogVisible = true" style="width: 25px;height: 25px;"/>
    </ElButton>
    <ElDialog v-model="dialogVisible" width="500">
        <template #header="{ titleId, titleClass }">
            <div class="my-header">
                <h4 :id="titleId" :class="titleClass">图标选择</h4>
                <el-button @click="clear">
                    清空
                </el-button>
            </div>
        </template>
        <el-tabs v-model="activeName">
            <ElTabPane v-for="category in categories" :key="category.name" :label="category.name" :name="category.name">
                <Icon v-for="icon in category.icons" :icon="icon.icon" @click="selectIcon(icon.icon)" style="font-size: 50px;margin-right: 10px;"  />
            </ElTabPane>
        </el-tabs>
    </ElDialog>
</template>

<style scoped lang="scss">
.my-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
}

.icon-selector {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.icons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    gap: 1rem;
}

button {
    background-color: transparent;
    border: none;
    cursor: pointer;
}

.icon-preview {
    width: 50px;
    height: 50px;
}

.selected {
    border: 2px solid #007bff;
}
</style>